<template>
  <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100">
    <div class="invest-box">
      <div class="box-2">
        <div class="title-box">
          <p>充值卡号</p>
        </div>
        <mu-row gutter>
          <mu-col span="12">
            <mu-form-item prop="input" label aria-placeholder>
              <input type="text" v-model="form.cardid" class="my-input" maxlength="10" />
            </mu-form-item>
          </mu-col>
        </mu-row>
      </div>
      <!-- <div class="residue-box">
        <p class="residue-title">当前帐户余额（元）</p>
        <p class="residue-res">{{this.ymoney}}</p>
      </div>-->

      <div class="box-2">
        <div class="title-box">
          <p>充值金额</p>
        </div>
        <mu-row gutter>
          <mu-col
            span="4"
            v-for="(item,index) in moneyList"
            :key="index"
            :class="{ checkprot:index==money}"
            @click="checkmoney(index,item.value)"
          >
            <div class="grid-cell">
              {{item.title}}
              <input
                type="radio"
                name="money-id"
                :checked="index==money"
                :value="item.id"
              />
            </div>
          </mu-col>
        </mu-row>
        <mu-row gutter>
          <mu-col span="12">
            <mu-form-item prop="input" label aria-placeholder>
              <input
                type="number"
                maxlength="5"
                v-model="form.money"
                class="my-input"
                @click="customize"
                placeholder="自定义充值金额"
              />
            </mu-form-item>
          </mu-col>
        </mu-row>

        <mu-button class="btn invest-btn" @click="success(callback)">立即充值</mu-button>
      </div>
      <div class="gift-box" v-show="show">
        <div class="fleft">
          <p class="gift-icon-box">
            <span class="iconfont icon-icon-test"></span>
          </p>
          <span class="gift-msg">冲{{gift.total}}送{{gift.gift}}</span>
        </div>
        <div class="fright">
          <p class="gift">¥{{gift.gift}}</p>
          <p class="total">满{{gift.total}}元可用</p>
        </div>
      </div>

    </div>
  </mu-form>
</template>

<script>
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
        show: false,
        giftlist: [],
        gift: {
            gift: 0,
            total: 0
        },
      money: 0,
      ymoney: 0,
      moneyList: [
        { id: 0, title: "自定义", value: 0 },
        { id: 1, title: "10", value: 10 },
        { id: 2, title: "20", value: 20 },
        { id: 3, title: "50", value: 50 },
        { id: 4, title: "100", value: 100 },
        { id: 5, title: "200", value: 200 },
        { id: 6, title: "500", value: 500 }
      ],
      labelPosition: "top",
      form: {
        money: "",
        cardid: this.$store.state.ChargingCardID
      }
    };
  },
  mounted() {
    //  console.log(this.$store.state.ChargingCardID)
    this.$api.queryAccountBalance().then(res => {
      this.ymoney = res.data.result.accountAmount;
    });
  },
  methods: {
    callback() {
      Toast("充值成功");
      this.$router.push("/cardlist");
    },
    checkmoney(index, value) {
      this.money = index;
      this.form.money = value;
        this.$api.promotionInfo(value).then(res => {
            if (res.data.code == 0) {
                this.gift.gift = res.data.result.giftAmount;
                this.gift.total = res.data.result.totalAmount;
                this.show = true;
            } else {
                this.show = false;
            }
        });
    },
    customize() {
      this.money = 0;
    },
    success(fn) {
      if (this.form.cardid == "") {
        Toast("请输入卡号");
        return;
      }
      if (this.form.money == "") {
        Toast("请选择充值金额");
        return;
      }
      if (this.form.money < 5) {
        Toast("充值金额须大于5元");
        this.form.money = "";
        return;
      }
      this.$api.recharge(this.form.money, this.form.cardid).then(res => {
        if (res.data.code == 0) {
          wx.chooseWXPay({
            timestamp: res.data.result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: res.data.result.nonceStr, // 支付签名随机串，不长于 32 位
            package: res.data.result.packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: res.data.result.sign, // 支付签名
            success: function(res) {
              fn();
            }
          });
        } else {
          Toast(res.data.msg);
        }
      });
    }
  },
  watch: {
    "form.cardid": function(v) {
      var reg = new RegExp("^[0-9]*$");
      if (!reg.test(v)) {
        this.form.cardid = "";
      }
    }
  }
};
</script>

<style>
</style>
